<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="fn"  uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page import="kr.co.insoft.framework.config.Authorities" %>
<c:set var="CONTEXT">${pageContext.request.contextPath}</c:set>
<c:set var="cssUrl">${pageContext.request.contextPath}/resources/css</c:set>
<c:set var="jsUrl">${pageContext.request.contextPath}/resources/js</c:set>
<div class="col-sm-12 page-header custom-page-header">
	<h1><spring:message code="menu.comparison.daily"/></h1>
	<small><spring:message code="menu.comparison.daily"/></small>
</div>
<!--  조회 설정 -->
<form:form modelAttribute="dailyEntityModel" role="form" cssClass="form-horizontal">
	<div class="form-group">
		<label class="col-sm-1 control-label"><spring:message code="configration.cloud.vender"/></label>
		<div class="col-sm-1">
			<select id="venderId" name="venderId" class="form-control">
				<option value=""><spring:message code="select.seleted.all"/></option>
				<c:forEach items="${venderList }" var="list">
	            	<option value="${list.venderid }">${list.venderName }</option>
	            </c:forEach>
			</select>
		</div>
		<div class="col-sm-1">
			<spring:message code="comparison.daily.from.desc" var="msgDesc"/>
			<form:input path="fromDate" cssClass="form-control" placeholder="${msgDesc}"/>
		</div>
		<div class="col-sm-1">
			<spring:message code="comparison.daily.to.desc" var="msgDesc"/>
			<form:input path="toDate" cssClass="form-control" placeholder="${msgDesc}"/>
		</div>
		<button class="btn btn-primary viewChartBtn" type="button">
			<spring:message code="button.print"/>
		</button>
	</div>
</form:form>
<!-- 차트 컨테이너 -->
<div class="form-group">
	<div id="container" style="height:400px;">
	</div>
</div>
 <script type="text/javascript">
var chart; 
$(document).ready(function() {
	/* 조회 */
	$(document).on("click", ".viewChartBtn", function() {
		Loading.show();
		$.post("./chart", $("#dailyEntityModel").serialize() , function(res) {
		}).fail(function() {
			bootbox.alert("<spring:message code='common.server.fail'/>");
		}).done(function(res) {
			if(!res[0]){
				bootbox.alert("<spring:message code='list.no.result'/>");
				drawDailyChart(new Object(res));
			}
			else {
				drawDailyChart(new Object(res));	
			}
		}).always(function() {
			Loading.hide();
		});
	});	
	
	var startDate = new Date();
	var FromEndDate = new Date();
	var ToEndDate = new Date();
	
	$('#fromDate').datepicker({
		format : "yyyy-mm-dd",
	    startDate: '01/01/2012',
	    endDate: FromEndDate, 
	    autoclose: true
	})
    .on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        $('#toDate').datepicker('setStartDate', startDate);
    }); 
	$('#toDate').datepicker({
		format : "yyyy-mm-dd",
        startDate: startDate,
        endDate: ToEndDate,
        autoclose: true
	})
    .on('changeDate', function(selected){
        FromEndDate = new Date(selected.date.valueOf());
        FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
        $('#fromDate').datepicker('setEndDate', FromEndDate);
    });

	/* 차트 */
	function drawDailyChart(dataList) {

		var xAxis = {
			categories : [],
			labels :{
				rotation: -45,
				align : 'right',
				marginLeft : 10
			}
		};
		var options = {
			chart : {
				renderTo : 'container',
				type : 'column',
				marginBottom : 100,
				marginRight : 50
			},
			title : {
				text : 'Cost Daily Chart'
			},
            plotOptions: {
                column: {stacking: 'normal'}
            },
			yAxis : {
				stackLabels: {enabled: true},
				title : {text : 'Cost($)'}
			},
			series : [],
			xAxis : [],
			tooltip : {
				shared: true
			},
			legend : {
				align : 'center',
				verticalAlign : 'bottom',
				y : 15,
				borderWidth : 0
			},
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'$<br/>'+
                        'TOTAL: '+ this.point.stackTotal+'$';
                },
				horizonAlign : 'center'
            },

		};
		var cloudGroupCnt=0;
		var cloudGroupNm=[];
		var cloudChkNm='';
		$.each(dataList, function(i, item) {
			if(cloudChkNm != this.venderName){	
				cloudChkNm = this.venderName;
				cloudGroupCnt++;
				cloudGroupNm.push(this.venderName);
			}
		});
		$.each(cloudGroupNm, function(idx, value){
			var cloudGrpNm = value;			
			var seriesArr = {
				name : cloudGrpNm,
				data :[],
				dataLabels:{
					enabled: false
				}
			};
			$.each(dataList, function(i, item) {			
				if(cloudGrpNm == this.venderName){				
					seriesArr.data.push(parseFloat(Math.round(parseFloat(this.cost)*100)/100));
					if(idx == 0 ){
						xAxis.categories.push(this.usageDate);
					}
				}	
			});
			options.series.push(seriesArr);
		});
		options.xAxis.push(xAxis);		
		chart = new Highcharts.Chart(options);
	}
});
</script>

